<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title></title>
    <style>
        body,div,ul,li,a,p,img,form,input,h3 {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a {
            text-decoration: none;
            color: #000;
            font-size: 14px;
        }
        html,body {
            width: 100%;
            height: 100%;
        }
        .jd_product {
            width: 100%;
            height: 100%;
        }
        .header {
            width: 100%;
            height: 50px;
            position: fixed;
            background-color: #eee;
            border-bottom: 1px solid #ccc;
        }
        .header_back,
        .header_menu{
            width: 50px;
            height: 50px;
            display: block;
            position: absolute;
            background: url("images/sprites.png")no-repeat;
            background-size: 200px 200px;
            padding: 15px ;
            background-origin: content-box;
            background-clip: content-box;
        }
        .header_back {
            background-position: -20px 0;
            left: 0;
        }
        .header_menu {
            background-position: -60px 0;
            right: 0;
            top: 0;
        }
        .seach {
            width: 100%;
            height: 100%;
            padding: 0 60px;
        }
        .seach > input {
            width: 100%;
            height: 40px;
            border-radius: 5px;
            margin-top: 5px;
            padding-left: 10px;
            outline: none;
            border: 1px solid #ccc;
            color: #666;
            font-size: 16px;
        }
        .content {
            width: 100%;
            height: 100%;
            padding-top: 50px;
        }
        .content_left {
            width: 100px;
            height: 100%;
            float: left;
            overflow: hidden;
            position: relative;
            background-color: #ff4500;
        }
        .content_left > .content_list {
            width: 100%;
            list-style: none;
            position: absolute;
            top: 0;
        }
        .content_left > ul li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid #ccc;
            background-color: #eee;
        }
        .content_left li a {
            width: 100%;
            height: 100%;
            display: block;
            color: #000;
            font-size: 14px;
            border-right: 1px solid #ccc;
        }
        .content_left li.active a {
            color: red;
            background-color: #fff;
            border-right: 0;
        }
        .content_right {
            height: 100%;
            margin-left: 100px;
            display: flex;
            flex-direction: column;
        }
        .content_right .bg {
            width: 100%;
            display: block;
        }
        .content_right .bg img {
            width: 100%;
            display: block;
        }
        .content_right h3 {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            padding-left: 10px;
            border-bottom: 1px solid #ccc;
        }
        .content_right .shirt {
            width: 100%;
            flex: 1;
            overflow: hidden;
            position: relative;
        }
        .content_right .shirt li {
            width: 33.333%;
            list-style: none;
            float: left;
            text-align: center;
        }
        .content_right .shirt li a {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
    <script src="js/iscroll.js"></script>
    <script src="js/fastclick.js"></script>
    <!--<script>
        window.onload = function () {

            var content_left = document.querySelector('.content_left');
            var ulBox = content_left.querySelector('.content_list');
            //获取左边盒子的高度
            var leftHeight = content_left.offsetHeight;
            //获取左边ul盒子的高度
            var ulBoxHeight = ulBox.offsetHeight;
            //设置变量记录每次移动后的位置
            var currentY = 0;
            //设置静态时候最多和最少的移动距离
            var maxTop = 0;
            var minTop = leftHeight - ulBoxHeight;
            //动态滑动时的最大和最小移动距离，设定为100px
            var maxMoveTop = maxTop + 100;
            var minMoveTop = minTop - 100;
            var startY,moveY,distanceY;
            //触摸事件(ulBox在此电脑模拟时没有效果，替换为window，最总需要改为ulBox)
            ulBox.addEventListener('touchstart', function (e) {
                //获取初始坐标
                startY = e.targetTouches[0].clientY
            })
            ulBox.addEventListener('touchmove', function (e) {
                moveY = e.targetTouches[0].clientY;
                distanceY = moveY - startY;
                //判断如果滑动的距离大于限制的最大或者小于最小值，直接跳出，阻止继续滑动
                if (distanceY + currentY > maxMoveTop || distanceY + currentY < minMoveTop) {
                    return;
                }
                ulBox.style.transition = 'none';
                ulBox.style.top = distanceY + currentY + 'px';
            })
            ulBox.addEventListener('touchend', function (e) {
                //如果滑动的距离大于静态时的限制，而小于滑动时的限制，则让页面回弹
                if (distanceY + currentY > maxTop) {
                    ulBox.style.transition = 'top 0.5s ease-in-out';
                    ulBox.style.top = maxTop + 'px';
                    //从新记录当前的currentY的值
                    currentY = maxTop;
                } else if (distanceY + currentY < minTop) {
                    ulBox.style.transition = 'top 0.5s ease-in-out';
                    ulBox.style.top = minTop + 'px';
                    currentY = minTop;
                } else {
                    //记录当前移动的距离，防止下次触摸时从新从原位置开始
                    currentY += distanceY
                }
            })
            //封装轻触事件
            /*var itcast = {
             tap: function (dom,callback) {
             //判断传入的是否是dom元素以及是否是一个对象
             if (!dom || typeof dom != 'object') {
             return;
             }
             var startX,startY,endX,endY;
             var startTime;
             dom.addEventListener('touchstart', function (e) {
             //判断是几个手指进行触摸
             if (e.targetTouches.length > 1) {
             return;
             }
             //记录接触时的时间
             startTime = Date.now();
             startX = e.targetTouches[0].clientX;
             startY = e.targetTouches[0].clientY;
             })
             dom.addEventListener('touchend', function (e) {
             //判断离开时是介个手指进行的触摸
             if (e.changedTouches.length > 1) {
             return
             }
             //判断总共触摸时间是否大于150，（借鉴的值）
             if (Date.now() - startTime > 150) {
             return
             }
             //判断触摸时移动的范围值
             endX = e.changedTouches[0].clientX;
             endY = e.changedTouches[0].clientY;
             if (Math.abs(endX - startX) < 6 && Math.abs(endY - startY) < 6) {
             console.log('轻触事件')
             //执行tap方法后，响应的操作
             //判断是否传入了一个回调函数
             callback && callback(e)
             }
             })
             }
             }*/
            var lis = ulBox.querySelectorAll('li');
            //调用itcast对象的tap方法，进行轻触，利用事件冒泡对li进行事件注册
            /*itcast.tap(ulBox, function (e) {
             //清除所有样式，排他
             for (var i = 0; i < lis.length; i++) {
             lis[i].classList.remove('active');
             //给每一个li标签添加索引值
             lis[i].index = i
             }
             //事件
             //                    console.log(e.target)  实际的事件是a标签
             var li = e.target.parentNode;
             li.classList.add('active');
             var liHeight = li.offsetHeight;
             //如果滑动的距离大于静态的最小值，就执行动画，小于就停止
             if (-li.index * liHeight < minTop) {
             ulBox.style.transition = 'top 0.5s';
             ulBox.style.top = minTop+ 'px';
             currentY = minTop;
             } else {
             ulBox.style.transition = 'top 0.5s';
             ulBox.style.top = -li.index * liHeight + 'px';
             currentY = -li.index * liHeight;
             }
             })*/
            //运用fastclick插件进行点击事件
            if ('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {
                    FastClick.attach(document.body);
                }, false);
            }
            ulBox.addEventListener('click', function (e) {
                //清除所有样式，排他
                for (var i = 0; i < lis.length; i++) {
                    lis[i].classList.remove('active');
                    //给每一个li标签添加索引值
                    lis[i].index = i
                }
                //事件
//                    console.log(e.target)  实际的事件是a标签
                var li = e.target.parentNode;
                li.classList.add('active');
                var liHeight = li.offsetHeight;
                //如果滑动的距离大于静态的最小值，就执行动画，小于就停止
                if (-li.index * liHeight < minTop) {
                    ulBox.style.transition = 'top 0.5s';
                    ulBox.style.top = minTop+ 'px';
                    currentY = minTop;
                } else {
                    ulBox.style.transition = 'top 0.5s';
                    ulBox.style.top = -li.index * liHeight + 'px';
                    currentY = -li.index * liHeight;
                }
            })
            var myScroll = new IScroll('.shirt',{
                mouseWheel: true,
                scrollbars: true
            });
        }
    </script>-->
    <script>
        window.onload = function () {
            var left = document.querySelector('.content_left');
            var ulBox = document.querySelector('.content_list');
            var lis = ulBox.querySelectorAll('li');
            var contentHeight = left.offsetHeight;
            var ulBoxHeight = ulBox.offsetHeight;
            var maxTop = 0;
            var minTop = contentHeight - ulBoxHeight;
            var maxMoveTop = maxTop + 100;
            var minMoveTop = minTop - 100;
            var currentY = 0;
            var startY,moveY,distanceY;
            ulBox.addEventListener('touchstart', function (e) {
                startY = e.targetTouches[0].clientY;
            })
            ulBox.addEventListener('touchmove', function (e) {
                moveY = e.targetTouches[0].clientY;
                distanceY = moveY - startY;
                if (distanceY + currentY > maxMoveTop || distanceY + currentY < minMoveTop) {
                    return;
                }
                ulBox.style.transition = 'none';
                ulBox.style.top = distanceY + currentY + 'px';
            })
            ulBox.addEventListener('touchend', function () {
                if (distanceY + currentY > maxTop) {
                    ulBox.style.transition = 'top 0.3s ease-in-out';
                    ulBox.style.top = maxTop + 'px';
                    currentY = maxTop
                } else if (distanceY + currentY < minTop) {
                    ulBox.style.transition = 'top 0.3s ease-in-out';
                    ulBox.style.top = minTop + 'px';
                    currentY = minTop
                } else {
                    currentY +=distanceY
                }
            })
            if ('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {
                    FastClick.attach(document.body);
                }, false);
            }
            ulBox.addEventListener('click', function (e) {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].classList.remove('active');
                    lis[i].index = i;
                }
                var li  = e.target.parentNode;
                li.classList.add('active');
                var liHeight = li.offsetHeight;
                if (-li.index * liHeight <  minTop) {
                    ulBox.style.transition = 'top 0.3s ease-in-out';
                    ulBox.style.top = minTop + 'px';
                    currentY = minTop;
                } else {
                    ulBox.style.transition = 'top 0.3s ease-in-out';
                    ulBox.style.top = -li.index * liHeight + 'px';
                    currentY = -li.index + liHeight;
                }
            })
            var myScroll = new IScroll('.shirt',{
                mouseWheel: true,
                scrollbars: true
            });
        }
    </script>
</head>
<body>
<div class="jd_product">
    <div class="header">
        <a href="javascript:;" class="header_back"></a>
        <form action="" class="seach">
            <input type="text" placeholder="请输入商品名称"/>
        </form>
        <a href="javascript:;" class="header_menu"></a>
    </div>
    <div class="content">
        <div class="content_left">
            <ul class="content_list">
                <li class=""><a href="javascript:;">热门推荐</a></li>
                <li class="active"><a href="javascript:;">潮流女装</a></li>
                <li class=""><a href="javascript:;">品牌男装</a></li>
                <li class=""><a href="javascript:;">内衣配饰</a></li>
                <li class=""><a href="javascript:;">家用电器</a></li>
                <li class=""><a href="javascript:;">电脑办公</a></li>
                <li class=""><a href="javascript:;">手机数码</a></li>
                <li class=""><a href="javascript:;">母婴频道</a></li>
                <li class=""><a href="javascript:;">图书</a></li>
                <li class=""><a href="javascript:;">家居家纺</a></li>
                <li class=""><a href="javascript:;">居家生活</a></li>
                <li class=""><a href="javascript:;">家具建材</a></li>
                <li class=""><a href="javascript:;">热门推荐</a></li>
                <li class=""><a href="javascript:;">潮流女装</a></li>
                <li class=""><a href="javascript:;">品牌男装</a></li>
                <li class=""><a href="javascript:;">内衣配饰</a></li>
                <li class=""><a href="javascript:;">家用电器</a></li>
                <li class=""><a href="javascript:;">电脑办公</a></li>
                <li class=""><a href="javascript:;">手机数码</a></li>
                <li class=""><a href="javascript:;">母婴频道</a></li>
                <li class=""><a href="javascript:;">图书</a></li>
                <li class=""><a href="javascript:;">家居家纺</a></li>
                <li class=""><a href="javascript:;">居家生活</a></li>
                <li class=""><a href="javascript:;">家具建材</a></li>
            </ul>
        </div>
        <div class="content_right">
            <a href="javascript:;" class="bg">
                <img src="images/banner_1.jpg" alt=""/>
            </a>
            <h3>热门分类</h3>
            <div class="shirt">
                <ul style="overflow: hidden">
                    <li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li><li>
                    <a href="javascript:;">
                        <img src="./images/nv-fy.jpg" alt="">
                        <p>毛衣</p>
                    </a>
                </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>